<template>
<div class="box">
    <div class="title">{{title}}</div>

    <!-- <float-icons padding="10 0 60 0" class="icons-warp">
        <div class="float-icon-item">
            <img src="../../../assets/dargIcon/back.png" alt="" @click="handleIcons('/home')" />
            <span>返回</span>
        </div>
     
    </float-icons> -->

    <div v-if="list.length==0" class="no_data">
        暂无数据
    </div>

    <div class="item" @click="selectItem(item)"  v-for="(item,index) in list" :key="index">

        <p>
            <span class="name">项目名:</span>
            <span class="value">{{item.item_name}}</span>
        </p>

         <p>
            <span class="name">价值:</span>
            <span class="value">{{item.price}}</span>
        </p>
        
        <p>
            <span class="name">数量:</span>
            <span class="value">{{item.num}}</span>
        </p>

        <div class="selectBox" v-if="item.selected">
           <img src="../../../assets/giftCheck/duigou.png" style="width:26px;height:26px" alt="">
        </div>
       

    </div>
    
    <van-button v-if="list.length==0" type="info" block class="btn-style" @click="add()">新增礼品登记</van-button>

    <van-button v-if="list.length>0" type="info" block class="btn-style" @click="sureOk()">确定</van-button>











</div>
</template>

<script>
import FloatIcons from '@/components/s-icons'
import { isbind } from '../../isCheckBind.js'
import {
    getGiftList
} from "../../../sgApi/index.js"
import {
    toast
} from '../../../utils/toast.js'
export default {
    name: "bill",
    components: {
        FloatIcons
    },
    data() {
        return {
           title:"广州曙光25周年庆敢晒就敢送",
           list:[
      
           ],
           acid:""
        }
    },
    mounted() {
        
    },
  
    mounted() {
        // this.getCurrent()
        this.init()
        isbind()
       // this.selectList()




        //  ##获取当前活动名称和三选一项目名称
        // https://app.gzsg.cn/sgmx/activity/getActivityItems?hosId=1

        getGiftList().then(res=>{
           console.log("结果",res)
           this.title=res.act_name
           this.list=res.item_list
 

        })
        



    },
    destroyed() {

        // 清除popstate事件 否则会影响到其他页面

        window.removeEventListener("popstate", this.disableBrowserBack, false);

    },
   
    methods: {
        add(){
            
        },
        sureOk(){
           if(this.acid){
                this.$router.replace({
                    path:"/giftCode",
                    query:{
                        act_id:this.acid
                    }
                })

           }else{
                toast({
                    message: "请选择周年庆礼品",
                    time: 2000
                })
           }



        },
        selectItem(item){

            this.acid = item.act_id
          
           let list = JSON.parse(JSON.stringify(this.list))

           list.forEach(i=>{
              if(i.id == item.id){
                i.selected = true
              }else{
                i.selected = false
              }
           })
          console.log(list)
           this.list=list
        },
        disableBrowserBack() {

            history.pushState(null, null, document.URL);

        },

        init() {
            history.pushState(null, null, document.URL);

            window.addEventListener('popstate', this.disableBrowserBack);
        },

    

        handleIcons(id) {
            //  this.$router.replace({
            //     path:"/auth"
            // })
            window.location.reload()
        },
      
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    padding-top: 12px;

    .title{
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }

    .item{
        width: 90%;
        // height: 60px;
        background-color: #ffffff;
        margin-top: 15px;
        border-radius: 6px;
        margin-left: 5%;
        box-shadow:#ccc 1px 1px 1px 1px;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
        box-sizing: border-box;
        position: relative;
        .name{
            font-size: 15px;
            color: #bebaba;

        }
        .value{
            font-size: 15px;
            margin-left: 8px;
            color: #777373;
        }

        .selectBox{
            width: 30px;
            height: 30px;
            // background-color: aqua;
            position: absolute;
            right: 16px;
            top:40px
        }
    }

    .btn-style{
        width: 90%;
        margin-top: 20px;
        margin-left: 5%;
    }

    .no_data{
        width: 90%;
        margin-top: 15px;
        margin-left: 5%;
        padding-top: 8px;
        padding-bottom: 8px;
        background-color: #ffffff;
        text-align: center;
        font-size: 14px;
        color: #ccc;
    }

 

}
</style>
